<template>

<div>
    <div style="width:35%;float:left">

            <ButtonGroup>
                <Button type='primary' @click="typechange(0)">新闻分类</Button>
                <Button type="error" @click="typechange(1)">产品分类</Button>
                <Button type='primary' @click="typechange(2)">列表</Button>
                <Button type="error" @click="typechange(3)">上传分类</Button>
            </ButtonGroup>
            <Tree :data="data" show-checkbox :render="renderContent" expand='true' @on-check-change='test'></Tree>
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="title" prop="title">
                    <Input v-model="formValidate.title" placeholder="请输入标题"></Input>
                </FormItem>
                <FormItem label="parentID" prop="parentId">
                    <Input v-model="formValidate.parentId" placeholder="parentID"></Input>
                </FormItem>
                <FormItem label="typeid" prop="type">
                    <Input v-model="formValidate.type" placeholder="typeid"></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                    <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                </FormItem>
            </Form>
        </div>
        <!-- 新闻版块 -->
        <div style="width:60%;float:left;margin-left:20px">
             <div>
                <Input v-model="filter.title" style="width:260px">                        
                        <Button slot="append" icon="ios-search" @click="search">搜索</Button>                        
                </Input>
                <p style="padding:5px 0"><Button type="primary" @click="addContent">增加内容</Button></p>                
                <Table border :columns="columns" :data="list"></Table>
                <br>
                <Page :total="total" show-elevator show-sizer :page-size="5"  @on-change="onChange" :page-size-opts="[5, 10, 15, 20]" @on-page-size-change="pageChange"></Page>
                <!-- <Page :total="total" show-total @on-change="onChange"></Page> -->
                <!-- 弹框 -->

                <!-- 增加弹框-->
                <Modal
                        v-model="modalAdd"
                        title="增加内容"
                        @on-ok="comfirm">                          
                        <p><Input v-model="addAndUpdata.title" placeholder="新闻标题"  clearable style="width: 200px"></Input></p>
                        <br>
                        <p><Input v-model="addAndUpdata.brief" placeholder="来源"  clearable style="width: 200px"></Input></p>
                        <br>
                        <p><Input v-model="addAndUpdata.author" placeholder="作者"  clearable style="width: 200px"></Input></p>
                        <br>
                        <p><Input v-model="addAndUpdata.cateId" placeholder="所属分类"  clearable style="width: 200px"></Input></p>
                </Modal>

                <!--修改弹框 -->
                <Modal
                        v-model="modal"
                        title="请选择字段名称"
                        @on-ok="ok">
                        <Form ref="formValidate" :model="formValidate" :label-width="80">
                              <FormItem label="" prop="field" style="width:300px">
                                  <Select v-model="formValidate.field" placeholder="选择字段名称">
                                      <Option value="title">新闻标题</Option>
                                      <Option value="brief">来源</Option>
                                      <Option value="author">作者</Option>
                                       <Option value="cateId">所属分类</Option>
                                  </Select>
                              </FormItem>
                              <FormItem label="" prop="content" style="width:300px">
                                  <Input v-model="formValidate.content" placeholder="输入修改内容..."></Input>
                              </FormItem>
                         </Form>
                </Modal>

                  
        </div>        
        </div>
</div>
</template>
<script>
import mix from './mix'
    export default {
         mixins:[mix],
        data () {
            return {
                module:'news',
              formValidate: {
                    title: '',
                    parentId:null,
                    type:0
               
                },
                ruleValidate: {
                    title: [
                        { required: true, message: '标题不能为空', trigger: 'blur' }]
                },
                data:[],
                  newsaddAndUpdata: {
                title:"",              //增加内容的字段
                brief: "",         //增加内容的字段
                author: "",         //增加内容的字段
                cateId:""               //增加内容的字段
            }, 
             filter: {
                page: 1,
                rows: 5,
                title: ""                  
            },
            showcom:false,
            cadeid:null,
                buttonProps: {
                    type: 'ghost',
                    size: 'small',
                },
            columns: [
        {
          title: "新闻标题",
          key: "title",
          align: "center"
        },
        {
          title: "来源",
          align: "center",
          key: "brief"
        },
        {
          title: "作者",
          align: "center",
          key: "author"
        },
          {
          title: "所属分类",
          align: "center",
          key: "cateId"
        },
        {
          title: "操作",
          key: "action",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                    id: 100
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.update(params.index);
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.remove(params.index);
                    }
                  }
                },
                "删除"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                   
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.comments(params.index);
                    }
                  }
                },
                "评论"
              )
            ]);
          }
        }
      ],
            }
        },
       
    
        created(){
          this.getdata()
        },
        methods: {
          getdata(type){
              var type=type||0
              this.$http.get(`http://10.31.160.78:3000/newscate/list/${type}`).then((response) => {
                  console.log(response.data)
                     this.data=response.data
                      })
          },
          renderContent (h, { root, node, data }) {
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: '100%'
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-paper-outline'
                            },
                            style: {
                                marginRight: '8px'
                            }
                        }),
                        h('span', data.title)
                    ]),
                    h('span', {
                        style: {
                            display: 'inline-block',
                            float: 'right',
                            marginRight: '32px'
                        }
                    }, [
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-plus-empty'
                            }),
                            style: {
                                marginRight: '10px',
                                color:"#000",
                               
                            },
                            on: {
                                click: () => { 
                                    this.formValidate.parentId=data._id
                                    console.log(data)
                             }
                            }
                        }),
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-minus-empty'
                            }),
                             style: {
                                marginRight: '20px',
                                color:'#00f',
                                
                            },
                            on: {
                                click: () => {
                                  
                                     this.remove(root, node, data) }
                            }
                        })
                    ])
                ]);
            },
            remove (root, node, data) {
                    this.$Modal.confirm({
                    title:'title',
                    content:'<p>确认删除?<p>',
                onOk:()=>{
                    this.$http({
                            method:"delete",
                            url:`http://10.31.160.78:3000/newscate/data/${data._id}`,
                        }).then(res=>{
                            this.getdata()
                            this.$Message.success('删除成功!');
                         
                        })
                }
                })
            },
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$http({
                            method:"post",
                            url:"http://10.31.160.78:3000/newscate/data",
                            data:this.formValidate
                        }).then(res=>{
                            this.getdata()
                            this.$Message.success('标题上传成功!');

                            Object.assign(this.$data.formValidate,this.$options.data().formValidate)
                        })
                           // })
                    } else {
                        this.$Message.error('标题上传失败!');
                    }
                })
            }, 
            handleReset (name) {
      
                this.$refs[name].resetFields();
            },
            typechange(type){
               this.getdata(type)
                this.formValidate.type=type

            },
                 comments(index){
          this.filter=this.list[index]._id;
            console.log( this.filter)
            this.$router.push({path:'/comment'})
            console.log(this.filter)
             this.getcommentData()
       },
  
       getcommentData() {
        this.$http({
          method: "post",
          url: `http://10.31.160.78:3000/comment/list`,
          data: this.filter
        }).then(res => {

          this.list = res.data.rows;
          console.log(this.list)
          this.total = res.data.total;
        });
      },  
    test(){
           console.log(this.data[0]._id);
           this.cateid=this.data[0]._id;
      
        // this.$http({
        //     method:'get',

        //     url:`http://10.31.160.78:3000/newscate/list/`,
        //     queryParams:{
        //         cateId=this.cateid
        //     }
            
        // })
     
    }
        }
    }
  </script>